<script setup lang="ts">
const formRef = useTemplateRef("formRef");

const model = reactive({
  username: "admin",
  password: "123456",
});

function onConfirm() {
  formRef.value!.validate().then(() => {
    router.push("/home");
  });
}
</script>

<template>
  <n-flex class="h-full" align="center" justify="center">
    <n-card class="w-fit">
      <n-h2 text="center">登录</n-h2>
      <n-form ref="formRef" :model="model" :show-label="false">
        <n-form-item
          path="username"
          :rule="{ required: true, message: '请输入账号', trigger: 'change' }"
        >
          <n-input
            placeholder="账号"
            v-model:value="model.username"
            @keydown.enter="onConfirm"
          >
            <template #prefix>
              <n-icon :size="16" class="i-line-md:account" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item
          path="password"
          :rule="{ required: true, message: '请输入密码', trigger: 'change' }"
        >
          <n-input
            type="password"
            placeholder="密码"
            show-password-on="click"
            v-model:value="model.password"
            @keydown.enter="onConfirm"
          >
            <template #prefix>
              <n-icon :size="16" class="i-mdi:password-outline" />
            </template>
            <template #password-visible-icon>
              <n-icon :size="16" class="i-line-md:watch-loop" />
            </template>
            <template #password-invisible-icon>
              <n-icon :size="16" class="i-line-md:watch-off-loop" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item>
          <n-button block type="primary" @click="onConfirm">登录</n-button>
        </n-form-item>
      </n-form>
    </n-card>
  </n-flex>
</template>
